<template>
  <view class="whe_maxv_view pad_15 boxs">
    <!--    搜索栏-->
    <view class="wh_f jz"
          style="background-color: white;border: 1px solid #3a9e5f;border-radius: 50px;
            padding: 2px">
      <view class="jz_flex" style="width: 50px">
        <view style="width: 20px">
          <view class="img_zfx">
            <image src="../../static/icon/ss_1.png" />
          </view>
        </view>
      </view>
      <view class="flex_1 czjz_flex">
        <up-input placeholder="请输入商品名称"
                  border="none" v-model="textValue"
                  style="color: #6b8073"></up-input>
      </view>
      <view @click="getList" class="jz_flex" style="height: 35px;width: 80px;background-color: #3a9e5f;border-radius: 50px">
        <text style="color: white">搜索</text>
      </view>
    </view>


    <!--      推荐商品列表-->
    <view class="wh_f mag_t-15">
      <view class="flex_1">
        <view @click="addDetail(item)" v-for="(item,index) in list" :key="index">
          <view v-if="index % 2 == 0"
                class="ba_white xyy bor_10" style="margin-bottom: 10px">
            <view class="img_zfx" style="width:100%">
              <view>
                <image :src="item?.image[0]" alt=""/>
              </view>
            </view>
            <view class="pad_5_10 boxs fz_12">
              <view class="fz_16 em ccsl_2">
                {{ item?.name }}
              </view>
              <view class="wz_huang" style="padding: 4px">{{ item.sales }}人买过</view>
              <view style="padding-bottom: 2px">
                <text class="scx wz_hui fz_12 centerdq mag_l-5"> ¥ {{item.re_price}}</text>
              </view>
              <view class="wh_f pad_b-10">
                <view class="flex_1 wz_red">
                  <text class="">¥</text>
                  <text class="fz_16 em">{{ parseInt(item.price) }}</text>
                  <text class="fz_10 em ">.{{ String(item.price).split('.')[1] }}</text>
                  <!--                      <text class=" fz_10 mag_l-5">折后价</text>-->
                </view>
                <view>
                  <img @click.stop="addShop(item)" class="centerdq" src="../../static/img/tianjia.png"
                       style="width: 20px;height: 20px" alt="">
                </view>
              </view>


              <view v-if="false" class="split_3">
                <view class=" wz_rigdq">
                  <image v-if="item.cart_amount>0" @click.stop="addShopList(false,item,index,$event)"
                         class="centerdq" src="../../static/img/jianshao.png"
                         style="width: 20px;height: 20px"/>
                </view>
                <view class="wz_jz centerdq">
                  <text v-if="item.cart_amount>0" class="centerdq">{{ item.cart_amount }}</text>
                </view>
                <view>
                  <image @click.stop="addShopList(true,item,index)" class="centerdq"
                         src="../../static/img/tianjia.png"
                         style="width: 18px;height: 18px"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="width: 10px"></view>
      <view class="flex_1">
        <view @click="addDetail(item)" v-for="(item,index) in list" :key="index">
          <view v-if="index % 2 == 1"
                class="ba_white xyy bor_10" style="margin-bottom: 10px">
            <view class="img_zfx" style="width:100%">
              <view>
                <image :src="item?.image[0]" alt=""/>
              </view>
            </view>
            <view class="pad_5_10 boxs fz_12">
              <view class="fz_16 em ccsl_2">
                {{ item?.name }}
              </view>
              <view class="wz_huang" style="padding: 4px">{{ item.sales }}人买过</view>
              <view style="padding-bottom: 2px">
                <text class="scx wz_hui fz_12 centerdq mag_l-5"> ¥ {{item.re_price}}</text>
              </view>
              <view class="wh_f pad_b-10">
                <view class="flex_1 wz_red">
                  <text class="">¥</text>
                  <text class="fz_16 em">{{ parseInt(item.price) }}</text>
                  <text class="fz_10 em ">.{{ String(item.price).split('.')[1] }}</text>
                  <!--                      <text class=" fz_10 mag_l-5">折后价</text>-->
                </view>
                <view>
                  <img @click.stop="addShop(item)" class="centerdq" src="../../static/img/tianjia.png"
                       style="width: 20px;height: 20px" alt="">
                </view>
              </view>


              <view v-if="false" class="split_3">
                <view class=" wz_rigdq">
                  <image v-if="item.cart_amount>0" @click.stop="addShopList(false,item,index,$event)"
                         class="centerdq" src="../../static/img/jianshao.png"
                         style="width: 20px;height: 20px"/>
                </view>
                <view class="wz_jz centerdq">
                  <text v-if="item.cart_amount>0" class="centerdq">{{ item.cart_amount }}</text>
                </view>
                <view>
                  <image @click.stop="addShopList(true,item,index)" class="centerdq"
                         src="../../static/img/tianjia.png"
                         style="width: 18px;height: 18px"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <up-toast ref="uToastRef"></up-toast>

  </view>
</template>
<script>
import {addShoppingCart, delCart, getShopGoodsList} from "../../Api/shop";

export default {
  name: "index",
  data(){
    return{
      textValue:'',
      list:[]
    }
  },
  onShow(){
    this.getList()
  },
  watch: {
    // 正确监听方式
    textValue: {
      handler: function(newVal, oldVal) {
        console.log("输入值变化:", newVal);
        // 清除之前的计时器
        clearTimeout(this.debounceTimer);
        // 设置防抖（300ms后执行）
        this.debounceTimer = setTimeout(() => {
          this.getList();
        }, 0);
      },
      immediate: false // 不需要在初始化时执行
    }
  },
  methods:{
    //添加购物车
    addShop(e){
      addShoppingCart({
        goods_id:e.id
      }).then(res=>{
        this.showToast('添加购物车成功!')
      }).catch(err=>{
        this.showToast('添加购物车失败!')
      })
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
    },
    addDetail(e){
      const params = { id:e.id}; // 待传递的参数
      uni.navigateTo({
        url: `/shophome/shopDetail/index?id=${params.id}`
      });
    },

    getList(){
      if(this.textValue){
        getShopGoodsList({
          keyword:this.textValue
        }).then(res=>{
          this.list = res.data.data
          console.log(this.list)
        })
      }
    },
    getAddress(){

    }
  }
}
</script>
<style scoped lang="scss">

</style>
